import { useForecastWeather } from "../../hooks/useForecastWeather";
import Loading from "../../ui/Loading";
import AppNav from "./AppNav";
import ForecastList from "./ForecastList";


function Forecast({ setIsHome, position }) {
  const { weatherForecastList, isLoading, formatDay } = useForecastWeather(position);

  return (
    <>
      {isLoading && <Loading />}
      {!isLoading && (
        <section className={styles.section}>
          <AppNav setIsHome={setIsHome} />
          <ForecastList 
            weatherForecastList={weatherForecastList} 
            formatDay={formatDay}
          />
        </section>
      )}
    </>
  );
}

export default Forecast;
